<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>评论动态加载</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="jquery.js"></script>
		<script type="text/javascript">
			$(function() {
				var page = 0; //记录请求的页数

				addList({ //页面加载时首次调用
					"last": page,
					"amount": 2
				});

				function addList(param) {
					$.ajax({
						type: 'get',
						data: param,
						dataType: 'json',
						url: 'http://localhost/day04/comment/data.php',
						success: function(data) {
							console.log(data);
							if(data == 1) {
								$("#more").html("没有内容可以加载了");
							}
							var tag = '';
							for(var i = 0; i < data.length; i++) {
								var v = data[i];
								tag += ' <li class="comment"><div class="left"><img src="' + v.imgpath + '"></div><div class="right"><div>' + v.nickname + '</div><div>' + v.content + '</div></div></li><hr>';
							}
							$("#contentList").append(tag);
						}
					});
				}
				$("#more").on("click", function() {
					page++;
					addList({
						"last": page,
						"amount": 2
					});
				});
			})
		</script>
	</head>

	<body>
		<div style="height:300px;"></div>
		<div id="container">
			<ul id="contentList">
				<!-- <li class="comment">
        <div class="left"><img src="./g1.jpg"></div>
        <div class="right">
            <div>一篇工作总结</div>
            <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>
        </div>
    </li>
    <hr>
    <li class="comment">
        <div class="left"><img src="./g1.jpg"></div>
        <div class="right">
            <div>一篇工作总结</div>
            <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div>
        </div>
    </li>
    <hr> -->
			</ul>
			<div id="more">加载更多...</div>
			<input type="hidden" id="last" value="0">
		</div>

	</body>

</html>